<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>EDIFIER</title>
		<link rel="stylesheet" type="text/css" href="css/nav.css"/>
		<link rel="stylesheet" type="text/css" href="css/product1.css"/>
		<link rel="stylesheet" type="text/css" href="css/footer.css"/>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"id="viewport"/>
	</head>
	<body>
		<div class="snow"></div>
		<div class="bear">
			<!-- 左边的北极熊 -->
		</div>
		<!-- 页面头部 -->
		<header >
			<div class="region">
				<div class="bighead_box">
					<!-- 导航栏 -->
					<div class="nav_box">
						<!-- 产品图标 -->
						<div class="baseBox logoNmenu">
							<a href="index.html"><img class="logo" src="img/首页图片/BrandLogo.png" alt="LOGO"></a>
							<!-- 导航菜单 -->
							<div class="menu">
								<ul>
									<li class="productMenu"style="background-color:white;">
										<a href="javascript:;">产品
										<img class="down" src="img/首页图片/downArr.png" >
										<img class="up" src="img/首页图片/uparr.png" >
										</a>
									</li>
									<li>
										<a href="service.html">服务与售后</a>
									</li>
									<li style="background-color:white;">
										<a href="ProductBuy.html">产品购买</a>
									</li>
								</ul>
							</div>
							<!-- 搜索图标 -->
							<div class="searchBox">
								<div class="search">
									<svg t="1615281300872" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2446" width="64" height="64">
									    <path d="M946.8 883.1L786.2 722.5c55.5-69.4 88.9-157.2 88.9-252.9C875 245.6 693.5 64 469.5 64S64 245.6 64 469.5 245.6 875 469.5 875c95.7 0 183.6-33.4 252.9-88.9L883 946.7c17.6 17.6 46.1 17.6 63.7 0 17.7-17.5 17.7-46 0.1-63.6z m-477.3-98.2c-174.2 0-315.4-141.2-315.4-315.4s141.2-315.4 315.4-315.4 315.4 141.2 315.4 315.4-141.2 315.4-315.4 315.4z"
										fill="#0E0E0E" p-id="2447"></path>
									</svg>
								</div>
								<!-- 国际站啥的 -->
								<div>
									<a href="#">
										<img src="img/首页图片/global.png" >
										国际站
									</a>
								</div>
							</div>
						</div>
						<!-- 二级菜单 -->
						<div class="showMenu">
							<div class="baseBox alertMenu">
								<dl>
									<dt><a href="#">耳机</a></dt>
									<dd><a href="#">漫步者</a></dd>
									<dd><a href="#">声迈</a></dd>
									<dd><a href="#">VOLONA</a></dd>
									<dd><a href="#">HECATE</a></dd>
									<dd><a href="#">STAX</a></dd>
								</dl>
								<dl>
									<dt><a href="#">音响</a></dt>
									<dd><a href="#">漫步者</a></dd>
									<dd><a href="#">HECATE</a></dd>
									<dd><a href="#">Airpulse</a></dd>
									<dd><a href="#">VOLONA</a></dd>
								</dl>
								<dl>
									<dt><a href="#">教育产品</a></dt>
									<dd><a href="#">考试耳机</a></dd>
									<dd><a href="#">模拟耳机</a></dd>
								</dl>
								<dl>
									<dt><a href="#">汽车音响</a></dt>
									<dd><a href="#">无损系列</a></dd>
									<dd><a href="#">快装系列</a></dd>
									<dd><a href="#">改装系列</a></dd>
									<dd><a href="#">隔音系列</a></dd>
									<dd><a href="#">线材系列</a></dd>
								</dl>
								<dl>
									<dt><a href="#">麦克风</a></dt>
									<dd><a href="#">麦克风</a></dd>
								</dl>
								<!-- 关闭耳机菜单 -->
								<div class="close">
									<img src="img/首页图片/close.png" >
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 搜索弹出框 -->
				<div class="searchMask">
					<div class="searchContentInput">
						<div class="closeSerchMask">X</div>
						<input type="text" placeholder="请输入搜索的产品" id="MenukeywordInput"/>
						<div class="searchInputIcon">
							<svg t="1615281300872" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2446" width="64" height="64">
							    <path d="M946.8 883.1L786.2 722.5c55.5-69.4 88.9-157.2 88.9-252.9C875 245.6 693.5 64 469.5 64S64 245.6 64 469.5 245.6 875 469.5 875c95.7 0 183.6-33.4 252.9-88.9L883 946.7c17.6 17.6 46.1 17.6 63.7 0 17.7-17.5 17.7-46 0.1-63.6z m-477.3-98.2c-174.2 0-315.4-141.2-315.4-315.4s141.2-315.4 315.4-315.4 315.4 141.2 315.4 315.4-141.2 315.4-315.4 315.4z"
								fill="#0E0E0E" p-id="2447"></path>
							</svg>
						</div>
						<!-- 查询返回的内容部分 -->
						<div class="searchKeywordList">
							<!-- 没有结果弹出上面这个 -->
							<div class="nodata" id="noresdiv" style="display: none;">没有找到结果</div>
							<!-- 有结果弹出下面这个 -->
							<div id="hasresdiv" style="display: none;">
								<div class="title">
						        搜索结果( <span id="hasrevnum"></span> )
								</div>
								<ol id="searchul">
						                        
								</ol>
							</div>
						</div>
					</div>
					<!-- 推荐产品 -->
					<div class="baseBox searchContentList">
					            <div class="tjSearchProduct">推荐产品</div>
					            <ul>
					                <li>
										<a href="product/product-28.html">
										<div class="imgcontent"><img src="img/首页图片/Hotproducts1.jpg" alt="" />
										</div><p>LolliPods 真无线蓝牙耳机</p>
										</a>
									</li>
									<li>
										<a href="product/product-14.html">
										<div class="imgcontent"><img src="img/首页图片/Hotproducts2.jpg" alt="" />
										</div><p>LolliPods Plus  真无线立体声耳机</p>
										</a>
									</li>
									<li>
										<a href="product/product-36.html">
										<div class="imgcontent"><img src="img/首页图片/Hotproducts5.jpg" alt="" />
										</div><p>TWS NB2 真无线主动降噪耳机</p>
										</a>
									</li>
					            </ul>
					            <div class="tjSearchProduct">
					                热门搜索
					            </div>
					            <dl id="hotsearchdl">
					                <dd><a href="">G4</a></dd>
					                <dd><a href="">G2</a></dd>
					                <dd><a href="">驱动</a></dd>
									<dd><a href="">耳机</a></dd>
									<dd><a href="">GS02</a></dd>
					            </dl>
					        </div>
				</div>
			</div>
		</header>
		<!-- 页面头部结束 -->
		<!-- 身体部分开始 -->
		<section >
			<div class="product">
				<div class="product_wrapper">
					<div class="slider_wrapper">
						<div class="slider">
							<div class="glass-case" style="width: 600px; height: 720px;">
								<div class="gc-display-area" style="height: 600px; width: 600px; top: 0px; left: 0px;">
									<!-- “缩略图”窗口 -->
									<div class="thumbnail">
									    <img src="img/产品购买页图片/N2%20Pods1.png" width="400px">
									    <!-- “放大镜”框 -->
									    <div class="magnifier"></div>
									</div>
									<!-- “原图”窗口 -->
									<div class="origin">
									    <img src="img/产品购买页图片/N2%20Pods1.png" style="position: absolute;">
									</div>
								</div>
								<div class="gc-thumbs-area gc-hz" style="width: 600px; height: 116px; top: 604px; left: 0px;">
									<ul class="allimg" style="width: 358px; height: 116px;">
										<li style="width: 32.4022%; height: 116px; border-color: rgb(225, 225, 225);" class="gc-active">
											<div class="gc-li-display-container">
												<img src="img/产品购买页图片/N2%20Pods1.png" style="margin-top: -52.7273%; margin-left: -52.7273%;">
											</div>
										</li>
										<li style="width: 32.4022%; height: 116px;">
											<div class="gc-li-display-container">
												<img src="img/产品购买页图片/N2%20Pods1left.png" style="margin-top: -52.7273%; margin-left: -52.7273%;">
											</div>
										</li>
										<li style="width: 32.4022%; height: 116px; margin-right: 0px;">
											<div class="gc-li-display-container">
												<img src="img/产品购买页图片/N2%20Pods1face.png" style="margin-top: -52.7273%; margin-left: -52.7273%;">
											</div>
										</li>
									</ul>
									<div class="gc-thumbs-area-prev gc-hide">
										<div class="gc-icon gc-icon-prev" style="color: rgb(98, 98, 98); margin-top: -16px;">
											
										</div>
									</div>
									<div class="gc-thumbs-area-next gc-hide">
										<div class="gc-icon gc-icon-next" style="color: rgb(98, 98, 98); margin-top: -16px;">
											
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="desc">
				        <h1 class="product-title" itemprop="name">
				            <vtm:render model="product">N2 Pods</vtm:render>
				        </h1>
				        <p class="product-tagline">
				            <vtm:render model="product">真无线立体声耳机</vtm:render>
				        </p>
				        <div class="product-tag">
				            <vtm:render model="product">
				                <ul>
				                    <li>蓝牙V5.1</li><li>游戏模式</li><li>28小时复合续航</li><li>13mm大尺寸单体</li><li>通话降噪</li><li>IP54级防尘防水</li>
				                </ul>
				            </vtm:render>
				        </div>
				        <div class="changeColor">
							<span style="background:#e3d2cd" indexid="0"></span>
							<span style="background:#c3c3d9" indexid="1"></span>
							<span style="background:#ddd8d2" indexid="2"></span>
							<span style="background:#98abbc" indexid="3"></span>
						</div> 
						<div class="product-social">
							<div class="social-head">立即购买：</div>
							<div class="purchase-url">
								<a href="https://item.jd.com/100028687400.html" target="_blank">
									<img src="https://cn-oss.edifier.com/Uploads/images/2021/04/25/2021042510081016193164906836.png" alt="">
								</a>
							</div>
						</div>
				        <div class="product-price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
				        <h2 class="md" style="font-size: 24px;line-height: 24px;">
							<span class="md current_price price" itemprop="price">￥188</span>
							<span class="policy">（建议零售价）</span> 
				        </h2>
				                <!-- <p class="discount">降价￥80，限时抢购</p> -->
				        <span class="policy" style="font-size: 12px;">本产品全国联保，享受三包服务，质保期为：一年质保</span>
				    </div>
				</div>
			</div>
			<div id="ohters">
				<div class="tile tile-fitpods-2"style="width:100%; height:auto; background:#fff; ">
					<img src="img/产品购买页图片/N2Podsbigrightpng.png" style="width: 600px; height: 600px;">
					<div class="text">
						<p>
							<span style="color:#f39c12;">
								<span style="font-size:24px;">一键开启游戏模式</span>
							</span>
						</p>
						<p>&nbsp;</p>
						<p>
							<span style="font-size:16px;">
							<span style="color:#f39c12;">音画同步和延迟说拜拜</span>
							</span>
						</p>
						<p>&nbsp;</p>
						<p style="margin-right:2.8%;">快速稳定传输，延迟更低，三击左耳即可开启游戏模式。</p>
					</div>
				</div>
				<div class="tile tile-fitpods-3">
									<p><img src="img/产品购买页图片/N2Podsbigleft.png" style="width: 700px; height: 600px;"></p>
									<div class="text">
										<div class="left">
											<p>
												<span style="color:#f39c12;">
													<span style="font-size:24px;">升级蓝牙5.1</span>
												</span>
											</p>
											<p>&nbsp;</p>
											<p>
												<span style="font-size:16px;">
												<span style="color:#f39c12;">更快连接  更高稳定</span>
												</span>
											</p>
											<p>&nbsp;</p>
											<p style="margin-right:2.8%;">采用新一代蓝牙5.1芯片，连接速度更快，数据传输速率更高效，性能更稳定</p>
										</div>
									</div>
								</div>
								<div class="tile tile-fitpods-2">
									<img src="img/产品购买页图片/N2Podsbigright2.png" style="width: 600px; height: 600px;">
									<div class="text">
										<p>
											<span style="color:#f39c12;">
												<span style="font-size:24px;">通话降噪算法</span>
											</span>
										</p>
										<p>&nbsp;</p>
										<p>
											<span style="font-size:16px;">
											<span style="color:#f39c12;">仿佛面对面交流</span>
											</span>
										</p>
										<p>&nbsp;</p>
										<p style="margin-right:2.8%;">通过通话降噪算法的加持，实现通话声与其他声音的分离，即使身处嘈杂，也能清晰交流</p>
									</div>
								</div>
								<div class="tile tile-fitpods-3">
									<p><img src="img/产品购买页图片/N2Podsbigleft2.png" style="width: 700px; height: 600px;"></p>
									<div class="text">
										<div class="left">
											<p>
												<span style="color:#f39c12;">
													<span style="font-size:24px;">13mm大尺寸单体</span>
												</span>
											</p>
											<p>&nbsp;</p>
											<p>
												<span style="font-size:16px;">
												<span style="color:#f39c12;">还原更多音乐细节</span>
												</span>
											</p>
											<p>&nbsp;</p>
											<p style="margin-right:2.8%;">13mm大尺寸单体精心调音，层次鲜明，减少失真还原音乐细节，解析更出色，让你享受音乐魅力</p>
										</div>
									</div>
								</div>
								<div class="tile tile-fitpods-2">
									<img src="img/产品购买页图片/N2Podsbigright3.png" style="width: 600px; height: 600px;">
									<div class="text">
										<p>
											<span style="color:#f39c12;">
												<span style="font-size:24px;">主从切换  自由随心</span>
											</span>
										</p>
										<p>&nbsp;</p>
										<p style="margin-right:2.8%;">单双耳使用无缝切换，随意拿起一只即可聆听稳定传输不易断连，怎么用都好用</p>
									</div>
								</div>
								<div class="tile tile-fitpods-3">
									<p><img src="img/产品购买页图片/N2Podsbigleft3.png" style="width: 700px; height: 600px;"></p>
									<div class="text">
										<div class="left">
											<p>
												<span style="color:#f39c12;">
													<span style="font-size:24px;">精致简约  小巧轻盈</span>
												</span>
											</p>
											<p>&nbsp;</p>
											<p style="margin-right:2.8%;">椭圆设计，鹅卵石握感，迷你便携半入耳式不挑耳朵，佩戴更稳固，零压迫更自在</p>
										</div>
									</div>
								</div>
								<div class="tile tile-fitpods-2">
									<img src="img/产品购买页图片/N2Podsbigright4.png" style="width: 600px; height: 600px;">
									<div class="text" style="top: 15%;">
										<p>
											<span style="color:#f39c12;">
												<span style="font-size:24px;">28小时复合续航</span>
											</span>
										</p>
										<p>&nbsp;</p>
										<p style="margin-right:2.8%;">音乐全天随行</p>
										<p style="margin-top:10px;">&nbsp;</p>
										<p style="margin-top:10px;">&nbsp;</p>
										<p style="margin-top:10px;">&nbsp;</p>
										<p style="margin-top:10px;">
											<img src="img/产品购买页图片/data.png" style="width: 400px; height: 96px;">
										</p>
										<p style="margin-top:10px;">&nbsp;</p>
										<p style="margin-top:10px;">&nbsp;</p>
										<p style="margin-top:10px;">&nbsp;</p>
										<p style="margin-top:10px;">&nbsp;</p>
										<p style="margin-top:10px;">&nbsp;</p>
										<p style="margin-top:10px;">*此数据来源于漫步者实验室，受测试环境、设备、音量、音源文件影响实际体验可能略有差异</p>
									</div>
								</div>
						<div class="tile tile-fitpods-3"style="width:100%; height:auto; background:#efe8e2; ">
						<p><img src="img/产品购买页图片/N2Podsbigleft4.png" style="width: 700px; height: 600px;"></p>
					<div class="text">
						<div class="left">
							<p>
							<span style="color:#f39c12;">
								<span style="font-size:24px;">IP54级防尘防水</span>
							</span>
							</p>
							<p>&nbsp;</p>
							<div class="left">
							<span style="font-size:16px;">
								<span style="color:#f39c12;">无惧大汗淋漓</span>
							</span>
							</div>
							<p>&nbsp;</p>
							<p style="margin-right:2.8%;">你尽管肆意运动，即使大汗淋漓，我也能轻松应对</p>
						</div>
					</div>
				</div>
			</div>
			<div class="product">
				<div class="product_wrapper">
					<div class="slider_wrapper">
						<div class="slider">
							<div class="glass-case" style="width: 600px; height: 720px;">
								<div class="gc-display-area" style="height: 600px; width: 600px; top: 0px; left: 0px;">
										<!-- “缩略图”窗口 -->
										<div class="thumbnail">
										    <img src="img/产品购买页图片/N2%20Pods1.png" width="400px">
										    <!-- “放大镜”框 -->
										    <div class="magnifier"></div>
										</div>
										<!-- “原图”窗口 -->
										<div class="origin">
										    <img src="img/产品购买页图片/N2%20Pods1.png" style="position: absolute;">
										</div>
								</div>
								<div class="gc-thumbs-area gc-hz" style="width: 600px; height: 116px; top: 604px; left: 0px;">
									<ul class="allimg" style="width: 358px; height: 116px;">
										<li style="width: 32.4022%; height: 116px; border-color: rgb(225, 225, 225);" class="gc-active">
											<div class="gc-li-display-container">
												<img src="img/产品购买页图片/N2%20Pods1.png" style="margin-top: -52.7273%; margin-left: -52.7273%;">
											</div>
										</li>
										<li style="width: 32.4022%; height: 116px;">
											<div class="gc-li-display-container">
												<img src="img/产品购买页图片/N2%20Pods1left.png" style="margin-top: -52.7273%; margin-left: -52.7273%;">
											</div>
										</li>
										<li style="width: 32.4022%; height: 116px; margin-right: 0px;">
											<div class="gc-li-display-container">
												<img src="img/产品购买页图片/N2%20Pods1face.png" style="margin-top: -52.7273%; margin-left: -52.7273%;">
											</div>
										</li>
									</ul>
									<div class="gc-thumbs-area-prev gc-hide">
										<div class="gc-icon gc-icon-prev" style="color: rgb(98, 98, 98); margin-top: -16px;">
											
										</div>
									</div>
									<div class="gc-thumbs-area-next gc-hide">
										<div class="gc-icon gc-icon-next" style="color: rgb(98, 98, 98); margin-top: -16px;">
											
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="desc">
				        <h1 class="product-title" itemprop="name">
				            <vtm:render model="product">N2 Pods</vtm:render>
				        </h1>
				        <p class="product-tagline">
				            <vtm:render model="product">真无线立体声耳机</vtm:render>
				        </p>
				        <div class="product-tag">
				            <vtm:render model="product">
				                <ul>
				                    <li>蓝牙V5.1</li><li>游戏模式</li><li>28小时复合续航</li><li>13mm大尺寸单体</li><li>通话降噪</li><li>IP54级防尘防水</li>
				                </ul>
				            </vtm:render>
				        </div>
				        <div class="changeColor">
							<span style="background:#e3d2cd" indexid="0"></span>
							<span style="background:#c3c3d9" indexid="1"></span>
							<span style="background:#ddd8d2" indexid="2"></span>
							<span style="background:#98abbc" indexid="3"></span>
						</div> 
						<div class="product-social">
							<div class="social-head">立即购买：</div>
							<div class="purchase-url">
								<a href="https://item.jd.com/100028687400.html" target="_blank">
									<img src="https://cn-oss.edifier.com/Uploads/images/2021/04/25/2021042510081016193164906836.png" alt="">
								</a>
							</div>
						</div>
				        <div class="product-price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
				        <h2 class="md" style="font-size: 24px;line-height: 24px;">
							<span class="md current_price price" itemprop="price">￥188</span>
							<span class="policy">（建议零售价）</span> 
				        </h2>
				                <!-- <p class="discount">降价￥80，限时抢购</p> -->
				        <span class="policy" style="font-size: 12px;">本产品全国联保，享受三包服务，质保期为：一年质保</span>
				    </div>
				</div>
			</div>
			<div class="productInfoParams">
				<div>
					<ul>
						<li itemprop="model">N2 Pods参数</li>
						<li>
						<span class="specs-title">品牌名称</span>
							漫步者x冇心
						</li>
						<li></li>
						<li>
							<span class="specs-title">蓝牙版本</span>
								V5.1
						</li>
						<li></li>
						<li>
							<span class="specs-title">型号</span>
								 EDF280003
						</li>
						<li></li>
						<li>
							 <span class="specs-title">音频解码</span>
							 	  SBC
						</li>
						<li></li>
						<li>
							<span class="specs-title">声压级</span>
								  94士3dBspL(A)
						</li>
						<li></li>
						<li>
							<span class="specs-title">蓝牙协议</span>
								  A2DP/HFP/AVRCP
						</li>
						<li></li>
						<li>
							<span class="specs-title">有效距离</span>
								  10m
						</li>
						<li></li>
						<li>
							<span class="specs-title">输入</span>
								  5V==200mA(耳机) 5V==1A(充电盒)
						</li>
						<li></li>
						<li>
							<span class="specs-title">工作时长</span>
								  约7h(耳机)+21h(充电盒)
						</li>
						<li></li>
						<li>
							<span class="specs-title">频响范围</span>
								  20Hz- 20KHz
						</li>
						<li></li>
					</ul>
					<div class="manual"></div>
				</div>
				<div class="list">
					<div class="title">
						包装及清单：
					</div>
				</div>
			</div>
		</section>
		<!-- 页面底部开始 -->
		<footer>
			<div class="footer_bigbox">
				<div class="subNav baseBox">
					<dl>
						<dt>企业相关</dt>
						<dd><a href="#">关于我们</a></dd>
						<dd><a href="#">社会责任</a></dd>
						<dd><a href="#">投资者关系</a></dd>
						<dd><a href="#">联系我们</a></dd>
						<dd><a href="#">人才招聘</a></dd>
						<dd><a href="#">热点新闻</a></dd>
					</dl>
					<dl>
						<dt>相关服务</dt>
						<dd><a href="#">服务协议</a></dd>
						<dd><a href="#">隐私政策</a></dd>
						<dd><a href="#">安规认证</a></dd>
					</dl>
					<dl>
						<dt>相关链接</dt>
						<dd><a href="#">AirPulse</a></dd>
						<dd><a href="#">STAX</a></dd>
					</dl>
					<dl style="border-right: none;">
						<dt>商品购买</dt>
						<dd><a href="#">京东</a></dd>
						<dd><a href="#">天猫</a></dd>
					</dl>
				</div>
				<!-- 页面底部部分的国际站 -->
				<!-- 这个 -->
				<div class="copyright baseBox pc" style="flex-direction: column;align-items: center; justify-content: center;padding: 10px 0;">
					<p>
						<a href="#" target="_blank">粤ICP备08026172号</a>
						&nbsp;Copyright 2019 深圳市漫步者科技股份有限公司  版权所有 
					</p>
					<p>北京爱德发科技有限公司对本网站所有图片与资料拥有所有权,如未经允许盗链或下载使用,必追究相关法律责任</p>
				</div>
				<a href="#" target="_blank">
					<img src="img/首页图片/govIcon.gif" title="深圳市市场监督管理局企业主体身份公示" alt="深圳市市场监督管理局企业主体身份公示" style="border-width:0px;border:hidden; border:none; width: 36px; height: 50px;">
				</a>
			</div>
		</footer>
	</body>
	<script src="js/Naverji.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/*
		放大镜实现原理：
		1. “缩略图”窗口与“原图”窗口中放置的是同一个图片，但“缩略图”窗口中的图片被缩小为400px，
		而“原图”窗口中的图片保持原始大小，溢出部分设为隐藏
		2. 先确定缩放比例，我们假定原图大小为1000px，缩略图大小为400px，缩放比例为2.5
		3. 首先实现“放大镜”框跟随鼠标移动的功能（我们让鼠标处于“放大镜”框的中心）
		4. 其次实现“原图”窗口中的图片随“放大镜”框的移动而相应移动
		5. 鼠标向右移动，“原图”窗口中的图片向左移动，它们的方向是相反的！这是实现原理中的关键环节
		6. “放大镜”框的大小不是随意设定的，它与放大倍数有关，如果要放大2.5倍，
		则“原图”窗口的大小也应该是“放大镜”框的大小的2.5倍
		*/
		 
		// 当鼠标进入“缩略图”窗口时，显示“原图”窗口和“放大镜”框
		$('.thumbnail').mouseover(function (e) {
		    $('.origin').css('display', 'block');
		    $('.magnifier').css('display', 'block');
		})
		// 当鼠标在“缩略图”窗口中移动时
		$('.thumbnail').mousemove(function (e) {
		    // 一、首先实现“放大镜”框跟随鼠标移动的功能（我们让鼠标处于“放大镜”框的中心）
		    // 获取鼠标当前位置
		    var pageX = e.pageX;
		    var pageY = e.pageY;
		    // 获取“缩略图”窗口在整个文档中的偏移位置
		    var offsetX = $('.thumbnail').offset().left;
		    var offsetY = $('.thumbnail').offset().top;
		    // 计算鼠标在缩略图中的相对位置
		    var relativeX = pageX - offsetX;
		    var relativeY = pageY - offsetY;
		    // 考虑到鼠标处于“放大镜”框的中心，我们要根据鼠标位置计算“放大镜”框的位置
		    var magOffsetX = $('.magnifier').width() / 2;
		    var magOffsetY = $('.magnifier').height() / 2;
		    $('.magnifier').css({ left: relativeX - magOffsetX + 'px',
		        top: relativeY - magOffsetY + 'px' });
		    // 获取“放大镜”框的新位置，后面会用到
		    var magX = $('.magnifier').position().left;
		    var magY = $('.magnifier').position().top;
		 
		    // 二、处理越界情况
		 
		    // 确定边界
		    var maxMagX = $('.thumbnail').width() - $('.magnifier').width()
		    var maxMagY = $('.thumbnail').height() - $('.magnifier').height()
		    // 左边界
		    if (magX <= 0) { $('.magnifier').css('left', '0px'); }
		    // 右边界
		    if (magX >= maxMagX) { $('.magnifier').css('left', maxMagX + 'px'); }
		    // 上边界
		    if (magY <= 0) { $('.magnifier').css('top', '0px'); }
		    // 下边界
		    if (magY >= maxMagY) { $('.magnifier').css('top', maxMagY + 'px'); }
		 
		    // 三、其次实现“原图”窗口中的图片随“放大镜”框的移动而相应移动
		    // 按照之前确定的缩放比例移动“原图”窗口中的图片
		    // 注意：图片的移动方向与鼠标的移动方向是相反的！
		    var originX = magX * 2.5;
		    var originY = magY * 2.5;
		    $('.origin img').css({ left: -originX + 'px', top: -originY + 'px' });
		})
		// 当鼠标离开“缩略图”窗口时，隐藏“原图”窗口和“放大镜”框
		$('.thumbnail').mouseout(function () {
		    $('.origin').css('display', 'none');
		    $('.magnifier').css('display', 'none');
		})
		$("header,section,footer").hide();
		var timer=setTimeout(function(){
		$(".bear").hide();
		$("body").css("background-image","none")
		$("header,section,footer").show();
		},7000)
	</script>
</html>
